<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
</style>
<template>
    <div>
        <form action="" style="margin: 5px 0;overflow: hidden">
            <Input v-model="name"   placeholder="根据用户名查找"  style="width: 200px;margin-right: 3px;"></Input>
            <Input v-model="phone"  placeholder="根据手机号查找"  style="width: 200px"></Input>
            <DatePicker v-model="zcks" type="datetime" placeholder="请输入注册开始时间" style="width: 200px"></DatePicker>
            <DatePicker v-model="zcjs" type="datetime" placeholder="请输入注册结束时间" style="width: 200px"></DatePicker>
            <DatePicker v-model="dlks" type="datetime" placeholder="请输入登陆开始时间" style="width: 200px"></DatePicker>
            <DatePicker v-model="dljs" type="datetime" placeholder="请输入登陆结束时间" style="width: 200px"></DatePicker>
            <div style="float: right">
                <Button type="error"  style="float: right;margin-right: 5px" @click="changePass">重置密码</Button>
                <Button type="warning"  style="float: right;margin-right: 5px" @click="jd('1')">冻结</Button>
            <Button type="success"  style="float: right;margin-right: 5px" @click="jd('0')">解冻</Button>
            <Button type="info"  style="float: right;margin-right: 5px" @click="load('1')">查询</Button>

            </div>
        </form>
        <Table :loading="loading" refs="table1" @on-selection-change="changeNum"  :data="Message" :columns="columnsList"></Table>
        <Modal
                v-model="modal1"
                class="userListInfoWrap"
                title="用户详情"
                >
            <p><span class="userListInfo">注册时间:</span><span v-text="userListInner.created"></span></p>
            <p><span class="userListInfo">国家:</span><span v-text="userListInner.country"></span></p>
            <p><span class="userListInfo">用户名:</span><span v-text="userListInner.username"></span></p>
            <p><span class="userListInfo">真实姓名:</span><span v-text="userListInner.userRealName"></span></p>
            <p><span class="userListInfo">电话号码:</span><span v-text="userListInner.phone"></span></p>
            <p><span class="userListInfo">钱包地址:</span><span v-text="userListInner.walletAddress"></span></p>
            <!--<p><span class="userListInfo">银行开户行:</span><span v-text="userListInner.created"></span></p>-->
            <p><span class="userListInfo">银行卡号:</span><span v-text="userListInner.bankcard"></span></p>
            <p><span class="userListInfo">支付宝账号:</span><span v-text="userListInner.alipay"></span></p>
            <p><span class="userListInfo">推荐人用户名:</span><span v-text="userListInner.recommenderid"></span></p>
            <p><span class="userListInfo">推广人数:</span><span v-text="userListInner.promotionNumber"></span></p>
            <p><span class="userListInfo">团队总人数:</span><span v-text="userListInner.teamnumber"></span></p>
            <p><span class="userListInfo">团队左区人数:</span><span v-text="userListInner.leftAreaNumber"></span></p>
            <p><span class="userListInfo">团队右区人数:</span><span v-text="userListInner.rightAreaNumber"></span></p>
            <p><span class="userListInfo">最后登录时间:</span><span v-text="userListInner.lastlogintime"></span></p>
        </Modal>
        <Modal
                v-model="modal2"
                title="修改密码"
        >
            <Form ref="formValidate"   :rules="ruleValidate" :label-width="100">
                <Row :gutter="16">
                    <Col span="12">
                    <FormItem label="修改密码" prop="changes">
                        <Input v-model="passWord"   style="margin-right: 3px;"></Input>
                    </FormItem>
                    </Col>
                </Row>

            </Form>
            <div slot="footer">
                <Button type="primary" @click="sub('formValidate')">保存</Button>
            </div>
        </Modal>
        <Page :total="pageNum" :page-size="pageSize"  style="text-align: center;margin-top: 15px;" show-total @on-page-size-change='pageSizes'  show-elevator show-sizer @on-change="pageChange"></Page>

    </div>
</template>
<script>
    import $http from '../../utils/axiosWrap'
    import canEditTable from '../tables/components/canEditTable.vue'
    import Cookies from 'js-cookie'
    export default {
        data() {
            var validatePass = (rule,value, callback) => {
                setTimeout(() => {
                    var reg = /^[A-Za-z0-9_.]{6,20}$/;
                    if(!reg.test(value)){
                        callback(new Error('密码为6-20位字母数字'));
                    }else{
                        callback();
                    }

                }, 100);
            };
            return {
                loading: true,
                Message:[],
                admin:true,
                passWord:'',
                modal1:false,
                modal2:false,
                numArr:[],
                userListInner:{},
                columnsList: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return  params.index + (this.initPage- 1) * this.pageSize + 1
                        }
                    },
                    {
                        title: '用户名',
                        align: 'center',
                        key: 'username',
                        editable: true
                    },
                    {
                        title: '真实姓名',
                        align: 'center',
                        key: 'userRealName',
                        editable: true
                    },
                    {
                        title: '手机号码',
                        align: 'center',
                        key: 'phone',
                        editable: true
                    },
                    {
                        title: '注册时间',
                        align: 'center',
                        width:160,
                        key:'created',
                        editable: true
                    },
                    {
                        title: '国家',
                        align: 'center',
                        key: 'country'
                    },
                    {
                        title: '推广人数',
                        align: 'center',
                        key: 'promotionNumber',
                        render: (h, params) => {
                            if(params.row.promotionNumber){
                                return params.row.promotionNumber
                            }else{
                                return '0'
                            }
                        }
                    },
                    {
                        title: '团队左区人数',
                        align: 'center',
                        render: (h, params) => {
                            if(params.row.leftAreaNumber){
                                return params.row.leftAreaNumber
                            }else{
                                return '0'
                            }
                        }
                    },
                    {
                        title: '团队右区人数',
                        align: 'center',
                        render: (h, params) => {
                            if(params.row.rightAreaNumber){
                                return params.row.rightAreaNumber
                            }else{
                                return '0'
                            }
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key: 'typestate',
                        render: (h, params) => {
                            if(params.row.typestate == '1'){
                                return '已冻结'
                            }else{
                                return '正常'
                            }
                        }
                    },
                    {
                        title: '最后登录时间',
                        align: 'center',
                        editable: true,
                        width:160,
                        render: (h, params) => {
                            if(params.row.lastlogintime){
                                return params.row.lastlogintime.replace(/\T/g, ' ').substring(0,19)
                            }else{
                                return ''
                            }
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 80,
                        render: (h, params) => {
                            if(this.admin){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.info(params)
                                            }
                                        }
                                    }, '查看')
                                ]);
                            }
                        }
                    }
                ],
                ruleValidate: {
                    changes: [
                        {validator: validatePass, trigger: 'blur' }
                    ]
                },
                name: '',
                phone: '',
                pageNum:1,
                pageSize:10,
                initPage:1,
                zcks:'',
                zcjs:'',
                dlks:'',
                dljs:''
            }
        },
        created: function () {
            this.load()
        },
        methods: {
            setTime(time){
            var date = new Date(time);
            var month = date.getMonth() + 1
            var day =  date.getDate()
            var hours =   date.getHours()
            var minutes = date.getMinutes()
            var datese = date.getSeconds()
            if(datese /1  < 10){
                datese = '0' +  datese
            }
            if(month /1  < 10){
                month = '0' +  month
            }
            if(day /1  < 10){
                day = '0' +  day
            }
            if(hours /1  < 10){
                hours = '0' +  hours
            }
            if(minutes /1  < 10){
                minutes = '0' +  minutes
            }
            return date.getFullYear() + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + datese
        },
            pageChange(index){
                this.initPage = index
                this.loading = true
                this.load ()
            },
            load (index){
                let _this = this
                _this.loading = true
                let params = new URLSearchParams()
                params.append('pageSize',_this.pageSize)
                params.append('username',_this.name)
                params.append('phone',_this.phone)
                if(index == '1'){
                    _this.initPage = 1
                    _this.pageNum = 1
                }
                    params.append('page',_this.initPage)
                if(_this.zcks){
                    params.append('createtime',_this.setTime(_this.zcks))
                }else{
                    params.append('createtime','')
                }
                if(_this.zcjs){
                    params.append('createEndTime',_this.setTime(_this.zcjs))
                }else{
                    params.append('createEndTime','')
                }
                if(_this.dlks){
                    params.append('lastrCreatetime',_this.setTime(_this.dlks))
                }else{
                    params.append('lastrCreatetime','')
                }
                if(_this.dljs){
                    params.append('lastCreateEndTime',_this.setTime(_this.dljs))
                }else{
                    params.append('lastCreateEndTime','')
                }
                $http.post('/backgroundUser/findByUsername',params).then(function (res) {
                    if(res.suc){
                    _this.Message = res.result.rows
                    _this.pageNum = res.result.total
                    _this.loading = false
                }else{
                    if(res.msg == "请先登录"){
                        _this.$Message.error('请重新登录！');
                    }else{
                        _this.$Message.error(res.msg);
                    }
                }
                })
            },
            changeNum (val){
                this.numArr = []
                for(var i = 0; i < val.length; i++){
                    this.numArr.push(val[i].id)
                }
            },
            info(val){
                this.modal1 = true
                this.userListInner = val.row
                if(this.userListInner.lastlogintime){
                    this.userListInner.lastlogintime = this.userListInner.lastlogintime.replace(/\T/g, ' ').substring(0,19)
                }else{
                    this.userListInner.lastlogintime = ''
                }
                if(!this.userListInner.leftAreaNumber){
                     this.userListInner.leftAreaNumber =  '0'
                }
                if(!this.userListInner.rightAreaNumber){
                     this.userListInner.rightAreaNumber =  '0'
                }
                if(!this.userListInner.promotionNumber){
                    this.userListInner.promotionNumber =  '0'
                }
                console.log(this.userListInner)
            },
            change(val){
                this.modal1 = true
                console.log(val.id)
            },
            jd(index){
                let _this = this
                if(_this.numArr.length){
                    let params = new URLSearchParams()
                    params.append('sysEnglishName',Cookies.get('user'))
                    params.append('ids', _this.numArr)
                    params.append('typestate', index)
                    $http.post('/backgroundUser/update',params).then(function (res) {
                        if(res.suc){
                            _this.loading = false
                            _this.load()
                            console.log(res)
                            _this.$Message.info('修改成功!')
                        }else {
                            _this.$Message.error(res.msg)

                        }
                    })
                }else{
                    _this.$Message.error('请选择用户!')
                }
            },
            pageSizes(val){
                this.pageSize = val
                this.loading = true
                this.load()
            },
            changePass(){
                this.modal2 = true
            },
            sub(name){
                let _this = this
                _this.$refs[name].validate((valid) => {
                    if (valid) {
                        var reg = /^[A-Za-z0-9_.]{6,20}$/;
                        if(!reg.test(_this.passWord)){
                            _this.$Message.error('密码为6-20位字母数字')
                        }else{
                            if (_this.numArr.length) {
                                let params = new URLSearchParams()
                                params.append('sysEnglishName', Cookies.get('user'))
                                params.append('ids', _this.numArr)
                                params.append('resetUserPassword',_this.passWord)
                                $http.post('/backgroundUser/update', params).then(function (res) {
                                    if (res.suc) {
                                        _this.loading = false
                                        _this.load()
                                        _this.$Message.info('修改成功!')
                                        _this.modal2 = false
                                    } else {
                                        _this.$Message.error(res.msg)
                                    }
                                })
                            } else {
                                _this.$Message.error('请选择用户!')
                            }
                        }

                    }
                })
            }
        }
    }
</script>
<style>
    .userListInfo{
        display: inline-block;
        width: 80px;
    }
    .userListInfoWrap p{
        line-height: 20px;
    }
</style>

